var syslide = document.querySelector('.sy-slide');
var slideImgs = document.querySelectorAll('.slide-img');
var dot = document.querySelector('.slide-dot');
var slideDot = document.querySelectorAll('.dot-item');
var arrowsLeft = document.querySelector('.arrows-left');
var arrowsRight = document.querySelector('.arrows-right');
var index = 0;
function slide(){
    for(var i=0; i<slideImgs.length; i++){
        slideImgs[i].classList.remove('active');
        slideDot[i].classList.remove('active');
    }
    slideImgs[index].classList.add('active');
    slideDot[index].classList.add('active');
}
var timer = setInterval(function(){
    arrowsRight.onclick();
},1000)
arrowsRight.onclick = function(){
    index++;   
    if(index >= slideImgs.length){
        index = 0;
    }
    slide();
}
arrowsLeft.onclick = function(){
    index--;   
    if(index <= -1){
        index = slideImgs.length-1;
    }
    slide();
}
syslide.onmouseenter = function(){
    clearInterval(timer);
}
syslide.onmouseleave = function(){
    timer = setInterval(function(){
        arrowsRight.onclick();
    },1000)
}
dot.onmouseover = function(e){
    if(e.target.className == 'dot-item'){
        var index = e.target.dataset.i;
        for(var i=0; i<slideImgs.length; i++){
            slideImgs[i].classList.remove('active');
            slideDot[i].classList.remove('active');
        }
        slideImgs[index].classList.add('active');
        slideDot[index].classList.add('active');
    }    
}

var newSong =[
    {
        title:'周深 - 归处',
        time:'04:10'
    },
    {
        title:'庄心妍 - 太需要你',
        time:'03:42'
    },
    {
        title:'半吨兄弟 - 干了这杯酒',
        time:'03:51'
    },
    {
        title:'欢子 - 反正爱都爱了',
        time:'04:47'
    },
    {
        title:'海伦 - 另一个我',
        time:'04:08'
    },
    {
        title:'花姐 - 牧马诗人',
        time:'03:46'
    },
    {
        title:'是七叔呢 - 在他乡',
        time:'03:32'
    },
    {
        title:'任然 - 没握住的星',
        time:'03:51'
    },
]
var usaSong =[
    {
        title:'Charlotte Churchman - Battle For Glory 荣耀之战',
        time:'03:52'
    },
    {
        title:'Angel Haze - Weight (Explicit)',
        time:'03:16'
    },
    {
        title:'Florrie - Garden',
        time:'02:46'
    },
    {
        title:'Slayyyter - Troubled Paradise',
        time:'04:01'
    },
    {
        title:'3OH!3 - I M SO SAD (Explicit)',
        time:'03:15'
    },
    {
        title:'Weezer - All My Favorite Songs',
        time:'03:22'
    },
    {
        title:'Tungevaag - Woke Up In India',
        time:'02:38'
    },
    {
        title:'Toby Romeo、Felix Jaehn、Faulhaber - Where The Lights Are Low',
        time:'02:17'
    },
]
var koreaSong =[
    {
        title:'请夏 - X',
        time:'04:15'
    },
    {
        title:'李秀贤 - Love And Pain (爱与痛苦)【都市男女的爱情法 OST】',
        time:'04:24'
    },
    {
        title:'安七炫 - 感冒药 (감기약) (Cough Syrup)',
        time:'03:29'
    },
    {
        title:'찬희 - 그리움 (Starlight)【女神降临 OST】',
        time:'04:32'
    },
    {
        title:'赵慧仙(선재) - I m Missing You【女神降临 OST】',
        time:'03:02'
    },
    {
        title:'柳洙正 - Color Rush',
        time:'03:25'
    },
    {
        title:'河成云 - Fall in You【女神降临 OST】',
        time:'03:46'
    },
    {
        title:'TREASURE - MY TREASURE',
        time:'03:16'
    },
]
var japanSong =[
    {
        title:'YOASOBI、Ayase - 怪物【动物狂想曲 第二季 OP】',
        time:'03:26'
    },
    {
        title:'LiSA - dawn【BACK ARROW OP】',
        time:'04:06'
    },
    {
        title:'YOASOBI、Ayase - 優しい彗星【动物狂想曲 第二季 ED】',
        time:'03:35'
    },
    {
        title:'YOASOBI、Ayase - アンコール',
        time:'04:31'
    },
    {
        title:'TREASURE - BEAUTIFUL -Anime Edit-【黑色五叶草 ED】',
        time:'01:32'
    },
    {
        title:'SawanoHiroyuki[nZk]、ReoNa - time【七大罪 愤怒的审判 ED】',
        time:'03:58'
    },
    {
        title:'いきものがかり - BAKU【博人传 火影忍者新时代 OP】',
        time:'03:47'
    },
    {
        title:'乃木坂46 - 僕は僕を好きになる (我会喜欢我自己)',
        time:'04:51'
    },
]
var newsongList = document.querySelector('.newsong-list');
var newsongStr = '';
newSong.forEach(item => {
    newsongStr += `
    <li class="newsong-item">
        <p class="newsong-disc">${item.title}
            <span class="newsong-special"><span>
        <p>    
        <p class="newsong-time">${item.time}</p>
    </li>
    `
})
newsongList.innerHTML = newsongStr;

var usaSongList = document.querySelector('.usa');
var usasongStr = '';
usaSong.forEach(item => {
    usasongStr += `
    <li class="newsong-item">
        <p class="newsong-disc">${item.title}<p>    
        <p class="newsong-time">${item.time}</p>
    </li>
    `
})
usaSongList.innerHTML = usasongStr;

var koreasongList = document.querySelector('.korea');
var koreasongStr = '';
koreaSong.forEach(item => {
    koreasongStr += `
    <li class="newsong-item">
        <p class="newsong-disc">${item.title}
            <span class="newsong-special"><span>
        <p>    
        <p class="newsong-time">${item.time}</p>
    </li>
    `
})
koreasongList.innerHTML = koreasongStr;

var japansongList = document.querySelector('.japan');
var japansongStr = '';
japanSong.forEach(item => {
    japansongStr += `
    <li class="newsong-item">
        <p class="newsong-disc">${item.title}
            <span class="newsong-special"><span>
        <p>    
        <p class="newsong-time">${item.time}</p>
    </li>
    `
})
japansongList.innerHTML = japansongStr;

var titleNav = document.querySelector('.title-nav');
var navName = document.querySelectorAll('.nav-name');
var newsongList = document.querySelectorAll('.newsong-list');
titleNav.onclick = function(e){
    for(var i=0; i<navName.length; i++){
        navName[i].classList.remove('active');
        newsongList[i].classList.remove('active');
    }
    if(e.target.localName == 'span'){
        var k = e.target.dataset.i;
        navName[k].classList.add('active');
        newsongList[k].classList.add('active');
    }
}